import React, {Component} from 'react'
import {
    StyleSheet, Text,
    View, ScrollView, Dimensions, RefreshControl, Image
} from 'react-native'
import colors from '../../component/Colors'
import MineItem from '../component/MineItem'
import SpacingView from '../component/SpacingView'
let {height, width} = Dimensions.get('window');
import screen from '../util/sceen'
export default class Person extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isRefreshing: false
        }

    }

    renderCells() {
        let cells = []
        let dataList = this.getDataList()
        for (let i = 0; i < dataList.length; i++) {
            let sublist = dataList[i]
            for (let j = 0; j < sublist.length; j++) {
                let data = sublist[j]
                let cell = <MineItem image={data.image} title={data.title} subtitle={data.subtitle} key={data.title}/>
                cells.push(cell)
            }
            cells.push(<SpacingView key={i}/>)
        }

        return (
            <View style={{flex: 1}}>
                {cells}
            </View>
        )
    }

    renderHeader() {
        return (
            <View style={styles.header}>
                <View style={{flexDirection:'row-reverse',}}>
                <Image source={require('../../img/Mine/icon_navigationItem_message_white@2x.png')} style={styles.settingview}/>
                    <Image source={require('../../img/Mine/icon_navigationItem_set_white@2x.png')} style={styles.settingview}/>
                </View>
                <View style={styles.userContainer}>
                    <Image style={styles.avatar} source={require('../../img/Mine/avatar.png')}/>
                    <View>
                        <View style={{flexDirection: 'row'}}>
                            <Text style={styles.nameview}>素敌</Text>
                            <Image style={{marginLeft: 4}}
                                   source={require('../../img/Mine/beauty_technician_v15@2x.png')}/>
                        </View>
                        <Text style={{color: 'white', marginTop: 4}}>个人信息 ></Text>
                    </View>
                </View>
            </View>
        )
    }

    render() {
        return (
            <View style={{flex: 1, backgroundColor: colors.background}}>
                <View style={{
                    position: 'absolute',
                    width: screen.width,
                    height: screen.height / 2,
                    backgroundColor: colors.theme
                }}/>
                <ScrollView
                    horizontal={false}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.isRefreshing}
                            onRefresh={() => this.onHeaderRefresh()}
                            tintColor='gray'
                        />
                    }>
                    {this.renderHeader()}
                    <SpacingView />
                    {this.renderCells()}
                </ScrollView>
            </View>
        );
    }

    onHeaderRefresh() {
        this.setState({isRefreshing: true})

        setTimeout(() => {
            this.setState({isRefreshing: false})
        }, 2000);
    }

    getDataList() {
        return (
            [
                [
                    {title: '我的钱包', subtitle: '办信用卡', image: require('../../img/Mine/icon_mine_wallet@2x.png')},
                    {title: '余额', subtitle: '￥95872385', image: require('../../img/Mine/icon_mine_balance@2x.png')},
                    {title: '抵用券', subtitle: '63', image: require('../../img/Mine/icon_mine_voucher@2x.png')},
                    {title: '会员卡', subtitle: '2', image: require('../../img/Mine/icon_mine_membercard@2x.png')}
                ],
                [
                    {title: '好友去哪', image: require('../../img/Mine/icon_mine_friends@2x.png')},
                    {title: '我的评价', image: require('../../img/Mine/icon_mine_comment@2x.png')},
                    {title: '我的收藏', image: require('../../img/Mine/icon_mine_collection@2x.png')},
                    {title: '会员中心', subtitle: 'v15', image: require('../../img/Mine/icon_mine_membercenter@2x.png')},
                    {title: '积分商城', subtitle: '好礼已上线', image: require('../../img/Mine/icon_mine_member@2x.png')}
                ],
                [
                    {title: '客服中心', image: require('../../img/Mine/icon_mine_customerService@2x.png')},
                    {title: '关于美团', subtitle: '我要合作', image: require('../../img/Mine/icon_mine_aboutmeituan@2x.png')}
                ]
            ]
        )
    }
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: colors.theme,
        paddingBottom: 20
    },
    header: {
        backgroundColor: colors.theme,
        paddingBottom: 20,
    },
    divideperson: {
        height: 10,
        backgroundColor: '#f3f3f3',
    },
    divideline: {
        height: 1,
        width: width,
        backgroundColor: '#f3f3f3'
    },
    userContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        margin: 10,
    },
    avatar: {
        width: 50,
        height: 50,
        marginRight: 10,
        borderRadius: 25,
        borderWidth: 2,
        borderColor: '#51D3C6'
    },
    nameview:{
        fontSize: 15,
        fontWeight: 'bold',
        color: '#eee',
    },
    settingview:{
        width:20,
        height:20,
        marginTop:10,
        marginRight:10,
        marginBottom:15
    }
});
module.exports = Person